<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人注册</title>
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/page-account.css">
    <link rel="icon" href="favicon.ico">
</head>

<body>
    <div class="register py-container ">
        <!--head-->
        <div class="logoArea">
            <a href="home.html" class="logo"></a>
        </div>
        <!--register-->
        <div class="registerArea">
            <h3>注册新用户<span class="go">我有账号，去<a href="login.html">登陆</a></span></h3>
            <div class="info">
                <form class="sui-form form-horizontal">
                    <div class="control-group">
                        <label class="control-label">用户名：</label>
                        <div class="controls">
                            <input type="text" class="input-xfat input-xlarge" placeholder="用户名" name="username">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">密码：</label>
                        <div class="controls">
                            <input type="password" class="input-xfat input-xlarge" placeholder="设置登录密码" name="password">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">确认密码：</label>
                        <div class="controls">
                            <input type="password" class="input-xfat input-xlarge" placeholder="再次确认密码" name="repass">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">昵称：</label>
                        <div class="controls">
                            <input type="text" class="input-xfat input-xlarge" placeholder="昵称" name="nickname">
                        </div>
                    </div>
                    <div class="control-group">
                        <span class="control-label">&nbsp;</span>
                        <label class="controls">
                            <input name="m1" type="checkbox">
                            <span>同意协议并注册《品优购用户协议》</span>
                        </label>
                    </div>
                    <div class="control-group">
                        <span class="control-label"></span>
                        <div class="controls btn-reg">
                            <input class="sui-btn btn-block btn-xlarge btn-danger" type="submit" value="完成注册">
                        </div>
                    </div>
                </form>
                <div class="clearfix"></div>
            </div>
        </div>
        <!--foot-->
        <div class="py-container copyright">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">手机品优购</a></li>
                <li><a href="#">销售联盟</a></li>
                <li><a href="#">品优购社区</a></li>
                <li><a href="#">品优购公益</a></li>
                <li><a href="#">English Site</a></li>
                <li><a href="#">Contact U</a></li>
            </ul>
            <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
            <div class="beian">京ICP备08001421号京公网安备110108007702</div>
        </div>
    </div>
</body>
<script>
    var form = document.querySelector('form');
    var username = document.querySelector('[name="username"]');
    var password = document.querySelector('[name="password"]');
    var repass = document.querySelector('[name="repass"]');
    var nickname = document.querySelector('[name="nickname"]');
    var m1 = document.querySelector('[name="m1"]')
    // 绑定事件
    form.addEventListener('submit', submit)

    function submit() {
        // 要加表单校验

        // 阻止默认行为
        window.event.returnValue = false
        // 发送请求
        if (!m1.checked) {
            alert('请勾选协议')
            return
        }
        var xhr = new XMLHttpRequest()
        xhr.open('post', 'http://localhost:8888/users/register')
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        var params =
            `username=${username.value}&password=${password.value}&rpassword=${repass.value}&nickname=${nickname.value}`
        xhr.send(params)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText
                    res = JSON.parse(res)
                    // console.log(res);
                    var {
                        message,
                        code
                    } = res

                    if (code === 1) {
                        alert(message)
                        // 跳转到登录页面
                        location.href = 'login.html'
                    } else {
                        alert(message)
                    }
                }
            }
        }
    }
</script>

</html>